<template>
  <div class="shop-cart">
    <nav-bar class="shopnavbar">
      <div slot="center">购物车({{count}})</div>
    </nav-bar>
    <scroll class="shop-scroll"
            ref="scroll">
      <shopcart-list></shopcart-list>
    </scroll>
    <cart-tool></cart-tool>
  </div>
</template>

<script>
  import NavBar from 'components/common/navbar/NavBar.vue'
  import ShopcartList from './childshopcart/ShopcartList'
  import scroll from 'components/common/scroll/Scroll'
  import CartTool from './childshopcart/CartTool'
  export default {
    name: "category",
    components:{
      NavBar,
      ShopcartList,
      CartTool,
      scroll
    },
    computed:{
      count(){
        return this.$store.state.cartlist.length
      }
    },
    activated(){
      this.$refs.scroll && this.$refs.scroll.scrollRefresh();
    }
  }
</script>

<style scoped>
  .shop-cart{
    height: 100vh;
  }
  .shopnavbar{
  background: var(--color-tint);
  color: #fff;
  }
  .shop-scroll{
    height: calc(100% - 44px - 49px - 40px);
    overflow: hidden;
  }
</style>
